import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class WriteDiaryPage extends StatefulWidget {
  const WriteDiaryPage({Key key}) : super(key: key);

  @override
  _WriteDiaryPageState createState() => _WriteDiaryPageState();
}

class _WriteDiaryPageState extends State<WriteDiaryPage> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        final currentFocus = FocusScope.of(context);
        if (!currentFocus.hasPrimaryFocus &&
            currentFocus.focusedChild != null) {
          FocusManager.instance.primaryFocus?.unfocus();
        }
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('记录笔记'),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text(
                '评论',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.white,
                ),
              ),
            )
          ],
        ),
        body: SafeArea(
          child: Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("assets/images/login_background.png"),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Positioned.fill(
                child: Padding(
                  padding: EdgeInsets.all(10),
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        InputFieldWidget(),
                        SizedBox(height: 30),
                        Row(
                          children: [
                            Chip(
                              label: Text('#你的花太好看了'),
                            ),
                            SizedBox(width: 15),
                            Chip(
                              label: Text('#怎么种的呀'),
                            ),
                            SizedBox(width: 15),
                            Chip(
                              label: Text('#赞赞赞'),
                            )
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class InputFieldWidget extends StatefulWidget {
  const InputFieldWidget({
    Key key,
  }) : super(key: key);

  @override
  _InputFieldWidgetState createState() => _InputFieldWidgetState();
}

class _InputFieldWidgetState extends State<InputFieldWidget> {
  int length = 0;

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      TextField(
        onChanged: (value) {
          setState(() {
            length = value.length;
          });
        },
        inputFormatters: [LengthLimitingTextInputFormatter(5000)],
        maxLines: null,
        autofocus: true,
        cursorColor: Colors.black45,
        decoration: InputDecoration(
          hintStyle:
              Theme.of(context).textTheme.overline.copyWith(fontSize: 16),
          labelStyle:
              Theme.of(context).textTheme.headline6.copyWith(fontSize: 16),
          hintText: "What's on your mind",
          isCollapsed: true,
          focusedBorder: InputBorder.none,
          enabledBorder: InputBorder.none,
          border: InputBorder.none,
          constraints: BoxConstraints(
            minHeight: MediaQuery.of(context).size.height * 0.25,
          )
        ),
        keyboardType: TextInputType.multiline,
      ),
      Container(
        height: 30,
        alignment: Alignment.centerRight,
        child: Text(
          '$length / 5000',
          style: Theme.of(context).textTheme.overline.copyWith(fontSize: 11),
        ),
      ),
    ]);
  }
}
